<style>

</style>
<template>
    <div style="margin-top: 20px;">
        <div ref="code" style="display: none;">
            <slot>
            </slot>
        </div>

        <div class="ly-code-pre note":class="{'ly-code-pre-note':theme=='note'}">
            <h3 class="ly-code-h3" @click="toggleCode">{{title}}<span v-show="!hideClose" style="float: right;color: #000">{{showState.show?'收起':'显示'}}</span>
            </h3>
            <pre v-if="showState.show||hideClose" :style="{height:height?(height+'px'):'auto'}">
                <div v-html="rawHtml">
                </div>
            </pre>
        </div>

    </div>
</template>
<script>

    Rap.define('', '', function () {

        var showState = {show: false};

        function parseCode(html) {
            html = html.replace(/v-on:/g, "@");
            html = html.replace(/=""/g, "");

            html = html.replace(/<templ/g, "<template");
            html = html.replace(/<templateate/g, "<template");

            html = html.replace(/<\/templ/g, "</template");
            html = html.replace(/<n>/g, "<!--");
            html = html.replace(/<\/n>/g, "-->");
            html = html.replace(/&(?!#?[a-zA-Z0-9]+;)/g, '&amp;')
                    .replace(/</g, '&lt;').replace(/>/g, '&gt;').replace('/-->/g', '--&gt;').replace(/'/g, '&#39;').replace(/"/g, '&quot;');

            html = html.replace(/\r\n/g, '</li><li>').replace(/\n/g, '</li><li>');
            html = ' <ol class="ly-code-ol"  ><li>' + html + '</li></ol>';
            return html;
        }

        return {
            name: 'ly-code-view',
            props: {
                title: {
                    'default': "code"
                },
                value: {},
                height:{
                    default:0
                },
                hideClose:Boolean,
                theme:{
                    default:'default'
                }
            },
            watch: {
                'value': function (val) {
                    this.rawHtml = parseCode(val);
                }
            },
            data: function () {
                return {
                    rawHtml: '',
                    showState: showState
                }
            },
            created: function () {
                var show = localStorage.getItem('ly-code-view-show');
                if (show) {
                    this.showState.show = true;
                } else {
                    this.showState.show = false;
                }
                if(this.value){
                    this.rawHtml = parseCode(this.value);
                }

            },
            methods: {
                toggleCode: function () {
                    this.showState.show = !this.showState.show;
                    if (this.showState.show) {
                        localStorage.setItem('ly-code-view-show', true);
                    } else {
                        localStorage.removeItem('ly-code-view-show')
                    }
                }
            },
            mounted: function () {
                if (!this.$refs.code.firstChild) {
                    return;
                }
                var html = this.$refs.code.firstChild.innerHTML;
                html=parseCode(html);
                this.rawHtml = html;
            }
        }
    });

</script>